<!DOCTYPE html>
<html>
<head>
    <title>商弦矿铁通长生成器</title>
    <!-- <link href="lishizhanpai.css" rel="stylesheet"> -->
    <!-- <link href="../../css/seniva.css" rel="stylesheet"> -->
    <link href="../../Seniva/stylesheet.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/3.0.7/umd.min.js"></script>
    <script src="https://sharonchoong.github.io/svg-exportJS/svg-export.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/file-saverjs@1.3.6/FileSaver.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
    <script src="tongchang.js"></script>
    <style>
        textarea {
            resize: none;
            min-height: 200px;
            max-height: 200px;
        }
        .youduiqi {
            text-align: right;
        }
    </style>
</head>
<body>
    <h1>商弦矿铁通长生成器</h1>
    <a href="..">◀ 返回上层</a>
    <p>
        <details>
            <summary class="label">查看说明</summary>
            <div class="card lab">
                <ul>
                    <li>本生成器及生成的通长线路图由臤徘斯（Kinboise）原创，为商弦矿铁设计。</li>
                    <li>本生成器可以生成通长线路图中一站的片段，并转换为png以便导入Minecraft。各站可拼接成完整的通长线路图。</li>
                    <li>使用方法很直观，不再详述。</li>
                    <li>使用字体：<a href="https://github.com/adobe-fonts/source-han-sans">思源黑体</a>、<a href="https://github.com/impallari/Cabin">Cabin</a>、<a href="https://learn.microsoft.com/en-us/typography/font-list/bahnschrift">Bahnschrift</a></li>
                </ul>
            </div>
        </details>
    </p>
    <div class="label">线路信息</div>
    <div class="card lab">
    <form name="xinxi">
        <figure>
            <table style="margin:0 auto">
                <tr>
                    <td class="youduiqi">站号</th>
                    <td>
                        <input name="zhanhao" value="1+00" style="max-width:3em"> <input name="xianlu" value="#ee1111" type="color">
                    </td>
                </tr>
                <tr>
                    <td class="youduiqi">换乘1</th>
                    <td>
                        <input name="huancheng1" value="2+00" style="max-width:3em"> <input name="huancheng1yanse" value="#003399" type="color"><input type="checkbox" name="huancheng1cunzai" checked>
                    </td>
                </tr>
                <tr>
                    <td class="youduiqi">换乘2</th>
                    <td>
                        <input name="huancheng2" value="3+00" style="max-width:3em"> <input name="huancheng2yanse" value="#3399cc" type="color"><input type="checkbox" name="huancheng2cunzai" checked>
                    </td>
                </tr>
                <tr>
                    <td class="youduiqi">车站名称（汉字）</th>
                    <td>
                        <input name="zhanming" value="八方阁">
                    </td>
                </tr>
                <tr>
                    <td class="youduiqi">车站名称（拉丁）</th>
                    <td>
                        <input name="zhanminglat" value="lubovice Doviniza">
                    </td>
                </tr>
    </table>
</figure>
    </form>
    </div>
    <p>
        <div class="label">格式设置</div>
        <div class="card lab">
            <form name="geshi">
                <figure>
                    <table style="margin:0 auto">
                        <tr>
                            <td class="youduiqi">背景颜色</td>
                            <td>
                                <input type="color" name="beijing" value="#ffffff">
                            </td>
                        </tr>
                        <tr>
                            <td class="youduiqi">文字颜色</td>
                            <td>
                                <input type="color" name="wenzi" value="#000000">
                            </td>
                        </tr>
                        <tr>
                            <td class="youduiqi">本站底纹色</td>
                            <td>
                                <input type="color" name="benzhan" value="#4d4d4d">
                            </td>
                        </tr>
                        <tr>
                            <td class="youduiqi">已过站颜色</td>
                            <td>
                                <input type="color" name="guozhan" value="#a0a0a0">
                            </td>
                        </tr>
                    </table>
                </figure>
            </form>
        </div>
    </p>
    <button onclick="yulan(0)" id="shengcheng">生成(全部预览)</button>
    <button onclick="yulan(1)" id="shengcheng">生成(逐张预览)</button>
<p>
    <div id="yulanqu" hidden>
        <div class="label">站牌预览</div>
        <div class="card lab gridc" style="text-align:center">
            <div id="tongchang"></div>
            <!-- <figure>
                <table>
                    <tr id="tongchangzuo"></tr>
                    <tr id="tongchangyou"></tr>
                </table>
            </figure> -->
        </div>
        <!-- <div>
            <form name="qiehuan">
                <table>
                    <tr>
                        <td class="card">
                            <input type="radio" name="fangxiang" value="1">左行<br>
                            <input type="radio" name="fangxiang" value="2">右行
                        </td>
                        <td class="card">
                            <input type="radio" name="fangxiang" value="1">左端站<br>
                            <input type="radio" name="fangxiang" value="2">中间站<br>
                            <input type="radio" name="fangxiang" value="3">右端站
                        </td>
                        <td class="card">
                            <input type="radio" name="fangxiang" value="1">未达站<br>
                            <input type="radio" name="fangxiang" value="2">当前站<br>
                            <input type="radio" name="fangxiang" value="3">已过站
                        </td>
                    </tr>
                </table>
            </form>
        </div> -->
        <div>
            <button onclick="shangyizhang()" id="shangyizhang">上一张</button>
            <button onclick="xiayizhang()" id="xiayizhang">下一张</button>
            <button onclick="xiazaidanzhang()" id="xiazaidanzhang">下载单张</button>
            <button onclick="xiazaiquanbu()">下载全部</button>
        </div>
    </div>
</p>
</body>

</html>